<template>
	<view class="sticky_c">
		<uni-search-bar @confirm="search" v-model="searchValue" @input="searchInput" placeholder="搜索关键词" />
		<tab v-model:current="current" :tabs="classList" field="name" @change="changeTab" :activeColor="primaryColor"
			fontSize="14px" height="35px" :lineColor="primaryColor" lineRadius="5px" paddingItem='0 11px'>
		</tab>
	</view>
	<view class="page_container">
		<list reqUrl="/api/wenan/list" :reqData="reqData" :immediatecheck="false" ref="listInstance">
			<template v-slot="{ list }">
				<view class="list" v-for="(item,index) in list" :key="item.kwaId" @click="goDetail(item.kwaId)"
					hover-class="hover">
					<view class="no" :class="{hot:index<3}">{{index+1}}</view>
					<view class="title">{{item.title}}</view>
					<uni-icons type="forward" size="18" color="#B3B3B3"></uni-icons>
				</view>
			</template>
		</list>
	</view>
	<view class="env brace"></view>
</template>

<script setup>
	import { ref } from 'vue';
	import request from '@/utils/common/request/index';
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import { useGetThemColor } from '@/hooks/useGetThemColor';


	const { primaryColor } = useGetThemColor();
	const { imgHost } = getApp().globalData;

	// * 搜索
	let searchValue = ref('');
	const search = ({ value }) => {
		reqData.keywords = value;
		listInstance.value.resetRequest();
	};
	const searchInput = (value) => {
		if (value === '') {
			reqData.keywords = '';
			listInstance.value.resetRequest();
		}
	}

	// * tab
	let current = ref(0);
	let classList = ref([]);
	const getClassList = (isReqList = true) => {
		return request({
			url: '/api/wenan/cate',
			loadingTip: '加载中'
		}).then(data => {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			data.unshift({
				kwcId: '',
				name: '全部'
			});
			classList.value = data;
			isReqList && listInstance.value.resetRequest();
		});
	}
	getClassList();

	const changeTab = index => {
		reqData.kwcId = classList.value[index].kwcId;
		listInstance.value.resetRequest();
	};


	/**列表 */
	const listInstance = ref();
	let goodsList = ref([]);
	let reqData = {
		kwcId: '',
		limit: 20
	};

	const goDetail = (id) => {
		uni.navigateTo({
			url: `/pages/new-people-qa-detail/new-people-qa-detail?id=${id}`,
		});
	}

	/**下拉刷新事件 */
	onPullDownRefresh(() => {
		Promise.all([getClassList(false), listInstance.value.resetRequest()]).finally(() => {
			uni.stopPullDownRefresh();
		});
	});
	// * 页面触底事件，不能删除，否则不能触发list组件触底事件
	onReachBottom(() => {});
</script>

<style lang="scss" scoped>
	.sticky_c {
		position: sticky;
		top: 0;
		z-index: 9;
		background-color: #fff;

		::v-deep .uni-searchbar {
			padding: 10px 10px 5px;
		}
	}

	.page_container {
		margin-top: 10px;
		margin-left: 14px;
		margin-right: 14px;
		margin-bottom: 10px;
		padding: 10px 14px;
		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
	}

	.list {
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #f5f5f5;

		.no {
			font-size: 16px;
			font-weight: bold;
			color: #B3B3B3;

			&.hot {
				color: #EE471A;
			}
		}

		.title {
			flex: 1;
			padding: 0 10px;
		}
	}

	.brace {
		height: 10px;
	}
</style>
<style>
	/*只能在这里设置*/
	page {
		background-color: #f5f5f5;
	}
</style>